<template>
  <div class="list-wrapper">
    <div class="title flex justify-between items-center">
      <div class="row no-wrap items-center">
        <div class="p">
          {{title}}

        </div>
        <div class="sub-title text-uppercase q-ml-sm">{{subtitle}}</div>
      </div>
      <div class="more">
        <span v-if="showMoreButton && url" clickable
          :class="{ hovered: hovered }"
          @mouseenter="hovered = true"
          @mouseleave="hovered = false"
          class="more-btn"
          @click="url && $router.push(url);">{{$t('更多')}} ></span>
      </div>
    </div>
    <div class="list-info">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListWrapper',
  props: {
    title: { type: String },
    subtitle: { type: String },
    showMoreButton: { type: Boolean, default: true },
    url: { type: String },
  },
  data() {
    return {
      hovered: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.list-wrapper {
  border-radius: 8px;
  .title {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid #f2f2f2;

    .sub-title {
      font-size: 13px;
      opacity: 0.6;
    }

    .p {
      border-bottom: 2px solid #265fb3;
      height: 30px;
      font-size: 18px;
    }
    span {
      cursor: pointer;
      font-size: 14px;

      &.hovered {
        color: $primary;
      }
    }

    .more-btn {
      color: #74828A;
    }
  }
}
</style>
